<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap-table.js}"></script>
    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}"></script>
    <!-- Custom Theme JavaScript -->
    <script th:src="@{/dist/js/sb-admin-2.js}"></script>
    <script th:src="@{/vendor/datepicker/bootstrap-datepicker.js}"></script>
    <link href="/vendor/bootstrap/css/bootstrap-table.css" rel="stylesheet">
    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/dist/css/sb-admin-2.css" rel="stylesheet">
    <link href="/vendor/datepicker/datepicker3.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>User</title>

    <!-- Bootstrap Core CSS -->
    <style>
        .myselect {
            width: 160px;
            box-sizing: border-box;
        }

        .myselector {
            padding: 8px;
            /*background-color: #f0f0f0;*/
            overflow: auto;
            border: 1px solid #DDDDDD;
        }

        .myselector > .kuang {
            float: left;
            padding: 4px;
        }

        .myselector > .kuang + .kuang {
            width: 40px;
            text-align: center;
        }

        .mybuttonabove {
            margin-top: 50px;
            margin-bottom: 30px;
        }

        .mybuttonbelow {
            /*margin-top: 50px;*/
            margin-bottom: 30px;
        }

        .mylabel {
            text-align: center;
        }
    </style>
</head>

<body>

<div id="page-User">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                用户
            </a>
        </li>
        <li><a href="javascript:void(0)" onclick="newWindow()" id="attributeAction">属性</a></li>
        <li data-toggle="modal" data-target="#myModal"><a href="javascript:void(0)">删除</a></li>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            确认信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        确认删除此条记录吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="cancel" class="btn btn-default" data-dismiss="modal">
                            取消
                        </button>
                        <button type="button" id="confirm" class="btn btn-primary">
                            确认
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </ul>
    <div class="tab-pane fade in active" id="home">
        <form name="User" th:action="@{/User}"
              onsubmit="getSelected()" method="post">
            <!--<input class="form-control" id="custCode" type="hidden" name="custCode" th:field="*{custCode}">-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">用户</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <br/>
                        <div class="row clearfix">
                            <div th:object="${user_entity}">
                                <div class="col-lg-6 column">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label>用户ID：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{userid}" name="userid"
                                                   id="userid"
                                                   maxlength="15" oninput="checkInput()"
                                            >
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label></label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div th:if="${#fields.hasErrors('userid')}"
                                                 th:errors="${user_entity.userid}" class="alert alert-danger">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label>用户名称：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{username}" name="username"
                                                   id="username"
                                                   maxlength="30"
                                            >
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label></label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div th:if="${#fields.hasErrors('username')}"
                                                 th:errors="${user_entity.username}" class="alert alert-danger">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label>分/支行：</label>
                                        </div>
                                        <div class="col-lg-6">
                                            <select class="form-control" th:field="*{branch}" name="branch"
                                                    id="branch">
                                                <option th:each="branchCode:${BranchCodeList}"
                                                        th:value="${branchCode.REFNON}"
                                                        th:text="${branchCode.REFNON}"></option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label></label>
                                        </div>
                                        <div class="col-lg-6">
                                            <div th:if="${#fields.hasErrors('branch')}"
                                                 th:errors="${user_entity.branch}" class="alert alert-danger">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label>电子邮箱：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{email}" name="email"
                                                   id="email" maxlength="100">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label></label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div th:if="${#fields.hasErrors('email')}"
                                                 th:errors="${user_entity.email}" class="alert alert-danger">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label>密码：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{passwrd}" name="passwrd"
                                                   id="passwrd" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label></label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div th:if="${#fields.hasErrors('passwrd')}"
                                                 th:errors="${user_entity.passwrd}" class="alert alert-danger">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label>确认密码：</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <input class="form-control" th:field="*{confirmPassword}"
                                                   name="confirmPassword"
                                                   id="confirmPassword" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <label></label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div th:if="${#fields.hasErrors('confirmPassword')}"
                                                 th:errors="${user_entity.confirmPassword}" class="alert alert-danger">
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                            <div th:object="${role_entity}">
                                <div class="col-lg-6 column">
                                    <div class="row clearfix">
                                        <div class="col-lg-1"></div>
                                        <div class="col-lg-10">
                                            <div class="myselector">
                                                <div class="col-lg-5  kuang">
                                                    <label class="mylabel">所属组</label>
                                                    <select class="myselect" id="leftValues" size="8"
                                                            th:field="*{roleid}"
                                                            multiple></select>
                                                </div>
                                                <div class=" col-lg-2">
                                                    <input type="button" class="mybuttonabove" id="btnLeft"
                                                           value="&lt;&lt;"/>
                                                    <input type="button" class="mybuttonbelow" id="btnRight"
                                                           value="&gt;&gt;"/>
                                                </div>
                                                <div class="col-lg-5  kuang">
                                                    <label class="mylabel">所有组</label>
                                                    <select class="myselect" id="rightValues" size="8"
                                                            multiple>
                                                        <option th:each="Role:${RoleInfoList}" th:value="${Role}"
                                                                th:text="${Role}"></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-1"></div>
                                    </div>
                                    <div class="row clearfix">
                                        <div class="col-lg-1"></div>
                                        <div class="col-lg-10">
                                            <div>
                                                <div class="col-lg-5  kuang">
                                                    <div th:if="${#fields.hasErrors('roleid')}"
                                                         th:errors="${role_entity.roleid}" class="alert alert-danger">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                </div>
                                                <div class="col-lg-5  kuang">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="row">
                        <div class="col-lg-4"></div>
                        <div class="col-lg-4" align="center">
                            <button type="reset" class="btn btn-primary">重 填</button>
                            <button type="submit" class="btn btn-primary">保 存</button>
                        </div>
                        <div class="col-lg-4"></div>
                    </div>
                    <br/>
                </div>
            </div>
            <!--表格-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseHistory">保存记录</a>
                    </h4>
                </div>
                <div id="collapseHistory" class="panel-collapse collapse in">
                    <br/>
                    <br/>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="col-lg-2">
                                <label>银行代码(6位)：</label>
                            </div>
                            <div class="col-lg-10">
                                <input class="form-control" name="branchCode"
                                       id="branchCode" oninput="getHistoryListByCode()"
                                       maxlength="6"
                                >
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="col-lg-2">
                                <label>用户:</label>
                            </div>
                            <div class="col-lg-10">
                                <input class="form-control" name="userCode"
                                       id="userCode" oninput="getHistoryListByCode()"
                                       maxlength="30"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table id="historyTable">
                            <thead>
                            </thead>
                        </table>
                        <br/>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>


<script>
    var Url = '/User/getHistoryList';

    function getUrl() {
        if ($('#branchCode').val() != "") {
            if ($('#userCode').val() != "")
                Url = '/User/getHistoryListbyUserIdandBranch?branchCode=' + $('#branchCode').val() + '&&userCode=' + $('#userCode').val();
            else
                Url = '/User/getHistoryListbyBranch?branchCode=' + $('#branchCode').val();
        }
        else {
            if ($('#userCode').val() != "")
                Url = '/User/getHistoryListbyUserId?userCode=' + $('#userCode').val();
            else
                Url = '/User/getHistoryList';
        }
    }

    function getHistoryListByCode() {
        getUrl();
        $('#historyTable').bootstrapTable("refresh", {url: Url});
    }

    $(document).ready(function () {
        $('#attributeAction').css("display", "none");
        loadList();
        checkInput();
    });

    function getSelected() {
        var myLeftValues = document.getElementById("leftValues");
        if (myLeftValues.options.length != 0) {
            for (var i = 0; i < myLeftValues.options.length; i++) {
                myLeftValues.options[i].selected = true;
            }
        }
        return true;
    }

    $("#btnLeft").click(function () {
        var selectedItem = $("#rightValues option:selected");
        $("#leftValues").append(selectedItem);
    });

    $("#btnRight").click(function () {
        var selectedItem = $("#leftValues option:selected");
        $("#rightValues").append(selectedItem);
    });

    function checkInput() {
        if ($('#userid').val() != "") {
            $.ajax({
                type: 'get',
                url: '/User/checkUser?'
                + 'UserId=' + $('#userid').val()
                + '',
                contentType: "application/json",
                success: function (data) {
                    if (data == "true")
                        $('#attributeAction').css("display", "block");
                    else if (data == "false")
                        $('#attributeAction').css("display", "none");
                },
                error: function () {
                    alert("获取用户失败");
                }
            })
            loadList();
        }
    }

    function getUserRoleInfoList() {
        $.ajax({
            url: "/User/getUserRoleInfoList?UserId=" + $('#userid').val(),
            dataType: "json",
            asnyc: false,
            success: function (data) {
                var myRightValues = document.getElementById("rightValues");
                var myLeftValues = document.getElementById("leftValues");
                //方法一：将左边的选项还回右边  方法二：重新初始化
                if (null != myLeftValues && typeof(myLeftValues) != "undefined" && null != myRightValues && typeof(myRightValues) != "undefined") {
                    if (myLeftValues.options.length != 0) {
                        for (var lrole = 0; lrole < myLeftValues.options.length;) {
                            myLeftValues.options.remove(lrole);
                        }
                    }
                }

                //处理信息，将右边对应的选项移到左边
                for (var urole in data) {
                    if (null != myLeftValues && typeof(myLeftValues) != "undefined" && null != myRightValues && typeof(myRightValues) != "undefined") {
                        for (var rrole = 0; rrole < myRightValues.options.length;) {
                            if (data[urole] == myRightValues.options[rrole].value) {
                                myLeftValues.options.add(myRightValues.options[rrole]);
                            }
                            else {
                                rrole++;
                            }
                        }
                    }
                }
            },
            error: function () {
                alert("所属组加载失败");
            }
        });
    }

    function loadList() {
        $.ajax({
            url: "/User/getAllRoleInfoList",
            dataType: "json",
            asnyc: false,
            success: function (data) {
                var myRightValues = document.getElementById("rightValues");
                if (null != myRightValues && typeof(myRightValues) != "undefined") {
                    if (myRightValues.options.length != 0) {
                        for (var arole = 0; arole < myRightValues.options.length;) {
                            //清除所有右侧选项
                            myRightValues.options.remove(arole);
                        }
                    }
                }
                for (var arole in data) {
                    var varItem = new Option(data[arole], data[arole]);
                    //添加所有右侧选项
                    rightValues.options.add(varItem);
                }
                getUserRoleInfoList();
            },
            error: function () {
                alert("所有组加载失败");
            }
        })

    }

    $('#historyTable').bootstrapTable({
        url: Url,         //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",
//        dataField: "data",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
        locale: 'zh-CN',                     //中文支持
        pagination: true,                   //是否分页
        sidePagination: 'server',           //指定服务器端分页
        pageNumber: 1,                      //初始化加载第一页，默认第一页
        pageSize: 5,                       //每页的记录行数（*）
        pageList: [5, 10, 15, 50, 100, 'ALL'],        //可供选择的每页的行数（*）
//        search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,                 //搜索
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 1,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
//                height: 500,              //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "userid",               //每一行的唯一标识，一般为主键列
        showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        queryParams: queryParams,//请求服务器时所传的参数
        responseHandler: responseHandler,//请求数据成功后，渲染表格前的方法
        onClickRow: onClickRow,
        columns: [{
            field: 'userid',
            title: '用户ID'
        }, {
            field: 'username',
            title: '用户名称'
        }]
    })

    //点击行事件
    function onClickRow(item, $element) {
        $('#userid').val(item.userid);
        $('#username').val(item.username);
        $('#branch').val(item.branch);
        $('#email').val(item.email);
        $('#passwrd').val(item.passwrd);
        $('#confirmPassword').val(item.passwrd);
        loadList();
        $('#attributeAction').css("display", "block");
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return {
            pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
            pageIndex: params.offset / params.limit + 1, //当前页面,默认是上面设置的1(pageNumber)
        }
    }

    //请求成功方法
    function responseHandler(result) {
        var errCode = result.errCode;//在此做了错误代码的判断
        if (errCode != 0) {
            alert("错误代码" + errCode);
            return;
        }
        //如果没有错误则返回数据，渲染表格
        return {
            total: result.dataLength, //总页数,前面的key必须为"total"
            rows: result.rowDatas //行数据，前面的key要与之前设置的dataField的值一致.
        };
    };

    $('#confirm').click(function () {
        $.ajax({
            type: 'get',
            url: '/User/deleteUser?'
            + 'UserId=' + $('#userid').val()
            + '',
            contentType: "application/json",
            success: function (data) {
                location.replace(location.href);
            },
            error: function () {
                alert("删除失败");
            }
        })
    });

    function newWindow() {
        window.open("/Tbluser_Properties?UserId=" + $('#userid').val());
    }

</script>
</body>

</html>